<template>
  <div ref="dom" class="charts chart-pie">
    <div class="no-src">
      <div>
        <Icon custom="iconfont iconzanwuneirong" class="btns" color=" #0E9DDB" />
        <p style="margin-top: 5px">暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'Piex',
  props: {
    value: Array,
    text: String,
    subtext: String,
    radius: {
      type: Array,
      default: () => ['60%', '70%']
    },
    center: {
      type: Array,
      default: () => ['50%', '50%']
    },
    roseType: {
      type: [Boolean, String],
      default: false
    },
    color: {
      type: Array,
      default: () => ['#038CFA', '#00D8FF', '#3AFBC6', '#F1A043', '#59FF8C', '#ed3f14']
    },
    minShowLabelAngle: {
      // 图例位置
      type: Number,
      default: 10
    },
    legendShow: {
      // 是否显示图例
      type: Boolean,
      default: true
    },
    labelLineShow: {
      type: Boolean,
      default: true
    },
    legendOrient: {
      // 图例位置
      type: String,
      default: 'vertical'
    },
    legendTop: {
      // 图例距离窗口右侧位置
      type: String,
      default: '15%'
    },
    legendBottom: {
      // 图例距离窗口底部位置
      type: String,
      default: 'auto'
    },
    legendItemGap: {
      type: Number,
      default: 10
    },
    right: {
      // 位置
      type: Number,
      default: 0
    },
    top: {
      // 位置
      type: Number,
      default: 40
    },
    bottom: {
      // 位置
      type: Number,
      default: 0
    },
    length: {
      type: Number,
      default: 20
    },
    length2: {
      type: Number,
      default: 40
    },
    startAngle: {
      type: Number,
      default: 90
    },
    lengthText: {
      type: Boolean,
      default: true
    },
    labelShow: {
      type: Boolean,
      default: true
    },
    tooltipStyle: {
      type: Object,
      default: function () {
        return { backgroundColor: '#fff', borderColor: '#fff', color: '#000' }
      }
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    setOption(value) {
      this.value = value
    },
    init() {
      if (!this.value || this.value.length === 0) {
        return
      }
      const legend = this.value.map(item => item.name)
      const option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
          borderWidth: 1,
          borderRadius: 10,
          ...this.tooltipStyle
        },
        legend: {
          orient: 'horizontal',
          show: this.legendShow,
          legt: 0,
          bottom: this.legendBottom,
          top: this.legendTop,
          itemGap: this.legendItemGap,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'circle',
          textStyle: {
            color: '#2C3542',
            fontStyle: 'normal',
            fontWeight: 400,
            fontFamily: 'Microsoft YaHei',
            fontSize: 12
          },
          data: legend
        },
        color: this.color,
        series: [
          {
            type: 'pie',
            // radius: ['70%', '100%'],                        //控制环形内半径和外半径
            radius: this.radius, // 控制环形内半径和外半径
            // center: ['50%', '50%'],
            center: this.center,
            minShowLabelAngle: this.minShowLabelAngle,
            startAngle: this.startAngle, // 起始角度，支持范围[0, 360]
            clockwise: true, // 饼图的扇区是否是顺时针排布
            avoidLabelOverlap: true, // 标签位置不会挪动  是重叠的
            legendHoverLink: false, // 是否开启 hover 在扇区上的放大动画效果
            hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
            hoverOffset: 10, // 高亮扇区的偏移距离
            roseType: this.roseType, // 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。 'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
            left: 0,
            top: this.top,
            right: this.right,
            bottom: this.bottom,
            width: 'auto',
            height: 'auto',
            label: {
              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
              normal: {
                show: this.labelShow,
                formatter: this.lengthText === true ? '{white|{b}}\n{c}{white| 件}' : '{white|{b}}\n{d}%',
                // width: 10,
                // position: 'outside',
                // height: '80px',
                // padding: [0, 0, 5, 0],
                // alignTo: 'labelLine',
                align: 'center',
                textStyle: {
                  fontSize: 14,
                  fontWeight: 400,
                  // color: '#fff',

                  fontFamily: 'Microsoft YaHei',
                  fontStyle: 'normal',
                  rich: {
                    white: {
                      color: '#2C3542',
                      lineHeight: 18,
                      fontSize: 12
                    }
                  }
                }
              }
            },
            labelLine: {
              // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
              show: this.labelLineShow,
              length: this.length,
              length2: this.length2,
              smooth: false,
              lineStyle: {}
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: '400',
                fontFamily: 'Arial',
                fontStyle: 'normal'
              }
            },
            data: this.value,
            // data: data,
            itemStyle: {
              // 图形样式
              normal: {
                borderWidth: 6,
                borderType: 'solid'
              },
              emphasis: {
                shadowBlur: 6,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      const echarts = require('echarts')
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      // this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
    },
    resize() {
      if (this.dom) {
        this.dom.resize()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.dom) {
          if (newVal) {
            this.setOption(newVal)
            this.init()
          } else {
            this.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  },
  updated() {},
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
}
.no-src {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2777ad;
  /deep/ .ivu-icon {
    font-size: 80px;
  }
  p {
    text-align: center;
  }
}
</style>
